<template>
    <view>
        <view class="pages">
            <view class="listbox" v-for="(items, index) in list" :key="index">
                <view class="listbox1">
                    <view class="text-darkGray text-sm">订单号：{{ items.orderSn }}</view>
                    <view class="text-sm" style="color: #ff1717">
                        {{ items.status == 0 ? '待付款' : items.status == 1 ? '待发货' : items.status == 3 ? '兑换成功' : items.status == 2 ? '待收货' : '' }}
                    </view>
                </view>

                <view class="listbox1 border_bottom" @tap="goorderdetailed" :data-status="items.status" :data-id="items.id">
                    <view>
                        <image class="listbox2left" mode="aspectFill" :src="items.orderItemList[0].productPic"></image>
                    </view>
                    <view class="margin-left-sm">
                        <view class="text-black text-sm">{{ items.orderItemList[0].productName }}</view>
                        <view class="text-darkGray text-sm flexs justify-between margin-top-xs">
                            <view>
                                规格：
                                <text v-for="(item, index1) in items.orderItem" :key="index1">{{ item.value }}</text>
                            </view>
                            <view>x{{ items.orderItemList[0].productQuantity }}</view>
                        </view>
                        <view class="red17 text-df margin-top-xs flexs align-center">
                            <view>
                                <text v-if="items.totalAmount > 0">￥{{ items.totalAmount }} +</text>
                                <image src="/static/images/douzi.png" class="douzis"></image>
                                <text>{{ items.useIntegration }}</text>
                            </view>
                        </view>
                    </view>
                </view>

                <!-- 订单状态：0->待付款；1->待发货；2->已发货；3->已完成；4->已关闭；5->无效订单 -->

                <view class="listbox2">
                    <view class="text-right">
                        <text class="text-black text-df">共{{ items.orderItemList[0].productQuantity }}件商品，总价：</text>
                        <text class="text-df" style="color: #ff1717">¥{{ items.payAmountStr }}</text>
                    </view>
                    <view class="flexs" style="justify-content: flex-end">
                        <view class="remindbtn2 text-df" v-if="items.status == 0" :data-status="items.status" :data-id="items.id" data-type="1" @tap="czorder">取消订单</view>
                        <view class="remindbtn1 text-df" v-if="items.status == 0" :data-status="items.status" :data-id="items.id" data-type="2" @tap="czorder" :data-items="items">
                            去付款
                        </view>
                        <view
                            class="remindbtn1 text-df"
                            v-if="items.status == 1 && items.remindType == 1"
                            :data-status="items.status"
                            :data-id="items.id"
                            data-type="3"
                            @tap="czorder"
                        >
                            提醒发货
                        </view>
                        <view class="remindbtn2 text-df" v-if="items.status == 1 && items.remindType == 2" :data-id="items.id" data-type="3">已提醒发货</view>
                        <view
                            class="remindbtn2 text-df"
                            v-if="items.status != 1 && items.status != 0 && items.status != 2"
                            :data-id="items.id"
                            :data-status="items.status"
                            data-type="4"
                            @tap="czorder"
                        >
                            删除订单
                        </view>
                        <view class="remindbtn1 text-df" v-if="items.status == 2" :data-id="items.id" :data-status="items.status" data-type="5" @tap="czorder">确定收货</view>
                    </view>
                </view>
            </view>

            <!-- 结束 -->

            <!-- 下面一个订单多个商品,查看更多 -->
            <!-- <view class="listbox">
      <view class="listbox1">
        <view class="text-darkGray text-sm">订单号：9029498485839</view>
        <view class="text-sm" style="color:#FF8722;">待发货</view>
      </view>

      <view class="listbox1 border_bottom" bindtap="goorderdetailed">
        <view>
          <image class="listbox2left" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201201%2F01%2F20120101110848_keuNr.thumb.700_0.jpg&refer=http%3A%2F%2Fcdn.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633341106&t=e0fbd77b05f916df75e4be468e170e5d"></image>
        </view>
        <view class="margin-left-sm">
          <view class="text-black text-sm ">海氏海诺*一次性使用医用防护口罩20片装（10片/包*2）</view>
          <view class="text-darkGray text-sm flexs justify-between margin-top-xs"><view>颜色：红色</view><view>x1</view></view>
          <view class="red17 text-df margin-top-xs flexs align-center"> <image src="../../images/douzi.png" class="douzis"></image><view>1000</view></view>
        </view>
      </view>

      <view class="listbox1 border_bottom" bindtap="goorderdetailed">
        <view>
          <image class="listbox2left" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201201%2F01%2F20120101110848_keuNr.thumb.700_0.jpg&refer=http%3A%2F%2Fcdn.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1633341106&t=e0fbd77b05f916df75e4be468e170e5d"></image>
        </view>
        <view class="margin-left-sm">
          <view class="text-black text-sm ">海氏海诺*一次性使用医用防护口罩20片装（10片/包*2）</view>
          <view class="text-darkGray text-sm flexs justify-between margin-top-xs"><view>颜色：红色</view><view>x1</view></view>
          <view class="red17 text-df margin-top-xs flexs align-center"> <image src="../../images/douzi.png" class="douzis"></image><view>1000</view></view>
        </view>
      </view>

      <view class="text-center text-df text-black">查看更多</view>

      <view class="listbox2">
        <view class="text-right">
          <text class="text-black text-df">共1件商品，总价：</text>
          <text class="text-df" style="color:#FF1717;">¥19.00</text>
        </view>
        <view class="flexs" style="justify-content:flex-end;">
          <view class="remindbtn2 text-df ">
              取消订单
          </view>
          <view class="remindbtn1 text-df ">
              提醒发货
          </view>
        </view>
      </view>

    </view> -->
            <!-- 结束 -->
        </view>
    </view>
</template>

<script>
// pagesb/orderlist/orderlist.js
const _request = require('../../utils/request.js');

const app = getApp();
export default {
    data() {
        return {
            list: [],
            pageNo: 1
        };
    }
    /**
     * 生命周期函数--监听页面加载
     */,
    onLoad: function (options) {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function () {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        // 订单列表
        this.getOrderlist();
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide: function () {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload: function () {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh: function () {
        uni.stopPullDownRefresh(); //停止下拉刷新
    },
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function () {
        this.pageNo = this.pageNo + 1;
        this.getOrderlist();
    },
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage: function () {},
    methods: {
        // 按钮操作  <!-- 订单状态：0->待付款；1->待发货；2->已发货；3->已完成；4->已关闭；5->无效订单 -->
        czorder(e) {
            let vm = this;
            const { status, type, id } = e.currentTarget.dataset;

            if (type == 1) {
                //点击取消订单
                uni.showModal({
                    title: '温馨提示',
                    content: status == 0 ? '请确认是否取消兑换商品' : '点击确认您将取消本次兑换，意豆及金额将原路返回！请确认是否取消兑换商品！',
                    cancelText: '取消',
                    confirmText: '确认',

                    success(res) {
                        if (res.confirm) {
                            _request
                                .postObj(
                                    '/yidou/order/closeOrder',
                                    {
                                        id: id
                                    },
                                    app.globalData.mallType
                                )
                                .then((res) => {
                                    if (res.data.code == 200) {
                                        uni.showToast({
                                            title: '取消成功',
                                            icon: 'none',
                                            duration: 1000
                                        });
                                        setTimeout(() => {
                                            vm.getOrderlist();
                                        }, 1000);
                                    }
                                })
                                .catch((error) => {
                                    console.log(error, 'error');
                                });
                        } else if (res.cancel) {
                            console.log('用户点击取消');
                        }
                    }
                });
            } else if (type == 2) {
                let data = e.currentTarget.dataset.items;
                console.log(data);
                uni.navigateTo({
                    url:
                        '/pagesb/payment/payment?orderId=' +
                        data.id +
                        '&orderSn=' +
                        data.orderSn +
                        '&realityPayPrice=' +
                        data.payAmountStr +
                        '&createordertime=' +
                        data.createOrderTime
                });
            } else if (type == 3) {
                _request
                    .postObj(
                        '/yidou/order/remindDelivery',
                        {
                            orderId: id
                        },
                        app.globalData.mallType
                    )
                    .then((res) => {
                        if (res.data.code == 200) {
                            uni.showToast({
                                title: '已提醒商家发货',
                                icon: 'none',
                                duration: 1000
                            });
                            setTimeout(() => {
                                vm.getOrderlist();
                            }, 1000);
                        }
                    })
                    .catch((error) => {
                        console.log(error, 'error');
                    });
            } else if (type == 4) {
                uni.showModal({
                    title: '温馨提示',
                    content: '确认删除订单?',
                    cancelText: '取消',
                    confirmText: '确认',

                    success(res) {
                        if (res.confirm) {
                            _request
                                .get(
                                    '/yidou/order/deleteOrderById',
                                    {
                                        orderId: id
                                    },
                                    app.globalData.mallType
                                )
                                .then((res) => {
                                    if (res.data.code == 200) {
                                        uni.showToast({
                                            title: '删除成功',
                                            icon: 'none',
                                            duration: 1000
                                        });
                                        setTimeout(() => {
                                            vm.getOrderlist();
                                        }, 1000);
                                    }
                                })
                                .catch((error) => {
                                    console.log(error, 'error');
                                });
                        } else if (res.cancel) {
                            console.log('用户点击取消');
                        }
                    }
                });
            } else if (type == 5) {
                _request
                    .postObj(
                        '/yidou/order/confirmreceipt',
                        {
                            id
                        },
                        app.globalData.mallType
                    )
                    .then((res) => {
                        if (res.data.code == 200) {
                            uni.showToast({
                                title: '收货成功',
                                icon: 'none',
                                duration: 1000
                            });
                            setTimeout(() => {
                                vm.getOrderlist();
                            }, 1000);
                        }
                    })
                    .catch((error) => {
                        console.log(error, 'error');
                    });
            }
        },

        goorderdetailed(e) {
            uni.navigateTo({
                url: '/pagesb/orderdetailed/orderdetailed?status=' + e.currentTarget.dataset.status + '&id=' + e.currentTarget.dataset.id
            });
        },

        // 订单列表
        getOrderlist() {
            const { pageNo, orderSn } = this;
            let data = {
                pageSize: 10,
                pageNo: pageNo,
                userId: uni.getStorageSync('userId')
            };

            _request
                .postObj('/yidou/order/getorderlist', { ...data }, app.globalData.mallType)
                .then((res) => {
                    if (res.data.code == 200) {
                        let Arr = res.data.data.rows.map((item) => {
                            if (item.orderItemList[0]) {
                                item.orderItem = JSON.parse(item.orderItemList[0].sp1);
                                item.totalAmount = item.totalAmount.toFixed(2);
                            }

                            return item;
                        });
                        this.setData({
                            list: pageNo > 1 ? [...this.list, ...Arr] : Arr
                        });
                    }
                })
                .catch((error) => {
                    console.log(error, 'error');
                });
        }
    }
};
</script>
<style>
.pages {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    background-color: #fbfbfb;
}

.listbox {
    padding: 20rpx;
    width: 670rpx;
    background: #fff;
    box-shadow: 2rpx 2rpx 8rpx 0rpx rgba(236, 236, 236, 0.4);
    border-radius: 8rpx;
    justify-content: center;
    margin-top: 20rpx;
}

.listbox1 {
    margin: 0 auto 20rpx;
    width: 670rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.border_bottom {
    padding-bottom: 20rpx;
    border-bottom: 1rpx solid #dadada;
    justify-content: normal;
}

.listbox2left {
    width: 150rpx;
    height: 150rpx;
}

.red17 {
    color: #ff1717;
}

.douzis {
    width: 24rpx;
    height: 24rpx;
}

.listbox2 {
    width: 670rpx;
    margin-top: 20rpx;
}

.remindbtn1 {
    background: #ff8722;
    color: #fff;
    width: 152rpx;
    height: 52rpx;
    line-height: 52rpx;
    text-align: center;
    margin-top: 20rpx;
    border-radius: 26rpx;
    margin-left: 20rpx;
}

.remindbtn2 {
    width: 152rpx;
    height: 52rpx;
    line-height: 52rpx;
    text-align: center;
    margin-top: 20rpx;
    border-radius: 26rpx;
    border: 1rpx solid #ff8722;
    color: #ff8722;
}

.remindbtn3 {
    background: #ff8722;
    width: 152rpx;
    height: 52rpx;
    line-height: 52rpx;
    text-align: center;
    margin-top: 20rpx;
    border-radius: 26rpx;
    color: #fff;
}
</style>
